<!DOCTYPE html>
<html>

<head>
    <title>Common dialog alert, block window loading, notifycationbar</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" id="seajsnode" src="../../../sea-modules/seajs/2.3.0/sea.js"></script>
    <script type="text/javascript">
    seajs.config({
        base: "http://localhost:10000/seajs/sea-modules",
        // debug: true,
        // 路径配置用来跨目录调用.
        paths: {
            // "jquery": "http://live/root/path",
        },
        // / 文件编码
        charset: 'utf-8',
        // 别名配置,注意别名的 VALUE 只能为sea-module define 的ID 如下 jquery,只能与sea-modules/ 下面的路径
        // define("jquery/jquery/1.10.1/jquery", [], function () { return jQuery; } );保持一致.
        alias: {
            // "seajs-debug": "seajs/seajs-debug/1.1.1/seajs-debug",
            "jquery": "jquery/1.10.2/jquery", //=={jquery=paths.jquery}/jquery/1.10.1/jquery
            "jquery-debug": "jquery/1.10.2/jquery-debug"
        }
    });
    </script>
    <style type="text/css">
    .demoBtn {
        background: #000;
        margin: 10px;
        width: 400px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        cursor: pointer;
    }
    </style>
</head>

<body>
    <div style="margin-top:100px;"></div>
    <div class="demoBtn" id="showNotifySuccess">Show Notification Bar Without Timeout Success</div>
    <div class="demoBtn" id="showNotifyError">Show Notification Bar Without Timeout Error</div>

    <div class="demoBtn" id="showNotifyTimeout">Show Notification Bar With timeout 5000</div>

    <div class="demoBtn" id="showBlockLoading">Show block loading</div>
    <div class="demoBtn" id="hideBlockLoading">Hide block loading</div>

    <div class="demoBtn" id="showDefaultAlertError">Show DefaultAlert Error</div>
    <div class="demoBtn" id="showDefaultAlertSuccess">Show DefaultAlert Success</div>

    <div class="demoBtn" id="showCustomizedAlert">ShowCustomizedAlert</div>

    <br/>

    <div class="demoBtn" id="showPopupAlertSuccess">Show Popup Alert Success</div>

    <div class="demoBtn" id="showPopupAlertError">Show Popup Alert Error</div>


    <script type="text/javascript">
    seajs.use("common/1.0.0/index-debug", function(app) {
        app(function() {
            console.log("ok");
            app("#showNotifySuccess").on("click", function() {
                app.displayNotificationBar("<p>your product has been added  <a href='#'>cart</a>success</p>", "success");
            });
            app("#showNotifyError").on("click", function() {
                app.displayNotificationBar("<p>your product has been added  <a href='#'>cart</a>failed</p>", "error");
            });
            app("#showNotifyTimeout").on("click", function() {
                app.displayNotificationBar("<p>your product has been added  <a href='#'>cart</a>success</p>", "success", 5000);
            });
            app("#showBlockLoading").on("click", function() {
                app.displayAjaxLoading(true);
            });
            app("#hideBlockLoading").on("click", function() {
                app.displayAjaxLoading(false);
            });
            app("#showDefaultAlertError").on("click", function() {
                var title = '<div class="c-header"><i class="error-icon"></i><span>Error Alert</span><i class="close" title="close"></i></div>';

                app.alert.show(title, "<p>Failed to add the product to the cart. <br />Please refresh the page and try one more time..</p>", 500, null, function(event) {
                    console.log("data", event.data);
                    app.alert.close();
                });
            });
            app("#showCustomizedAlert").on("click", function() {
                var title = '<div class="c-header"><i class="error-icon"></i><span>Error Alert</span><i class="close" title="close"></i></div>';
                var buttons = [{
                    class: "c-success",
                    data: {
                        action: "COK"
                    },
                    text: "C-OK"
                }, {
                    class: "c-error",
                    data: {
                        action: "CERROR"
                    },
                    text: "C-Error"
                }];
                app.alert.show(title, "<p>Custmoized buttons</p>", 500, buttons, function(event) {
                    console.log("data", event.data);
                    app.alert.close();
                });

            });
            app("#showDefaultAlertSuccess").on("click", function() {
                var title = '<div class="c-header"><i class="success-icon"></i><span>Added Successfully!</span><i class="close" title="close"></i></div>';
                var body = '<div class="addtocart-msg-body"><p class="itemcount">There are <span>5</span> items in your cart.</p><p class="sub-total">Sub-Total:&nbsp;&nbsp;<span>$204.04</span></p></div>';
                var buttons = [{
                    class: "continue",
                    data: {
                        action: "continue"
                    },
                    text: "Continue"
                }, {
                    class: "checkout",
                    data: {
                        action: "checkout"
                    },
                    text: "Checkout"
                }];
                app.alert.show(title, body, 500, buttons, function(event) {
                    console.log("data", event.data);
                    app.alert.close();
                });
            });

            app("#showPopupAlertSuccess").on("click", function() {
                app.displayPopupNotification("success message", "success", true);
            });

            app("#showPopupAlertError").on("click", function() {
                app.displayPopupNotification("error message", "error", true);

            });
        });
    });
    </script>
</body>

</html>
